// 引入 React 及其 Hooks
import React, { useEffect, useState } from "react";
// 引入科大讯飞语音听写组件
import { XfVoiceDictation } from "@muguilin/xf-voice-dictation";
// 引入暗黑主题的样式文件
import "../../components/dark/index.scss";
// 引入自定义组件 Xuni1
import Xuni1 from "../../utils/xuni";
// 引入自定义组件 Xuni2
import Xuni2 from "../../utils/xuni2";
// 引入自定义的 axios 实例
import axios from '../../utils/axios';
// 引入弹幕组件
import Danmu from '../../components/Danmu';
// 注释掉的 AI 组件引入
// import AI2 from "../../components/AI/index"

// 定义 Index 组件
function Index() {
    // 定义弹幕消息数组的状态，初始为空数组
    const [danmuMessages, setDanmuMessages] = useState<string[]>([]);

    // 模拟添加弹幕消息，在组件挂载时执行一次
    useEffect(() => {
        // 定义新的弹幕消息数组
        const newMessages = ["欢迎来到直播间！", "哇哈哈哈"];
        // 更新弹幕消息数组状态
        setDanmuMessages(newMessages);
    }, []);

    // 定义一个状态变量 tp，用于控制语音识别的开关状态，初始为 false
    const [tp, UseTp] = useState(false);
    // 定义一个状态变量 speaking，用于表示语音合成是否正在进行，初始为 false
    const [speaking, setSpeaking] = useState(false);

    // 定义一个状态变量 userAI，用于存储 AI 回复的内容，初始值为空数组
    const [userAI, setUserai] = useState([]);
    // 定义一个状态变量 user，用于存储用户输入的内容，初始值为空字符串，使用 as any 进行类型断言
    const [user, setUser] = useState("") as any;

    // 定义 videosets 状态，用于控制显示视频还是聊天界面，初始为 true 表示显示视频
    const [videosets, setVideosets] = useState(true);

    // 切换动态图片和语音识别状态的函数
    const theme = () => {
        // 切换到聊天界面
        setVideosets(false);
        if (tp) {
            // 关闭语音识别开关
            UseTp(false);
            // 开始语音合成
            identify();
            // 这里 tabss 未定义，需要确保它已经被定义
            // 定义一个局部状态变量 tabss，用于控制某个标签页的显示状态，初始为 true
            const [tabss, setTabss] = useState(true);
            // 显示某个标签页
            setTabss(true);
        } else {
            // 打开语音识别开关
            UseTp(true);
        }
    };

    // 切换主题的状态变量，初始为 true 表示亮色主题
    const [tabS, setTabs] = useState(true);
    // 定义一个函数 tbas，用于切换主题
    const tbas = (theme: string) => {
        // 如果主题为 "dark"
        if (theme === "dark") {
            // 将文档根元素的类名设置为 "dark"
            document.documentElement.className = theme;
            // 将主题信息存储到本地存储中
            localStorage.setItem("theme", theme);
            // 切换到暗色主题状态
            setTabs(false);
        } else if (theme === "light") {
            // 将文档根元素的类名设置为 "light"
            document.documentElement.className = theme;
            // 将主题信息存储到本地存储中
            localStorage.setItem("theme", theme);
            // 切换到亮色主题状态
            setTabs(true);
        }
    };

    // 使用 useEffect 钩子，在组件挂载时执行，用于恢复上次保存的主题
    useEffect(() => {
        // 获取本地存储中的主题信息，如果没有则默认使用亮色主题
        const theme = localStorage.getItem("theme") || "light";
        // 将文档根元素的类名设置为恢复的主题
        document.documentElement.className = theme;
    }, []);

    useEffect(() => {
        const loadVoices = () => {
            const voices = window.speechSynthesis.getVoices();
            console.log("可用语音:", voices);
        };

        // 监听语音列表变化
        window.speechSynthesis.onvoiceschanged = loadVoices;

        // 页面加载时立即获取语音列表
        loadVoices();

        return () => {
            window.speechSynthesis.onvoiceschanged = null;
        };
    }, []);
    // 监听本地存储的变化，如果主题信息改变，更新文档根元素的类名
    window.addEventListener("storage", (e) => {
        if (e.key === "theme") {
            document.documentElement.className = e.newValue || "";
        }
    });

    // 初始化科大讯飞语音听写实例
    const xfVoice = new XfVoiceDictation({
        // 科大讯飞应用的 APPID
        APPID: "866fb1af",
        // 科大讯飞 API 密钥
        APISecret: "ZDIwNDVmYjJkZWFlMGEzODFiYzhmOTEy",
        // 科大讯飞 API 密钥
        APIKey: "3d6e21170c0e89246b09c09bd0e3b105",
        // webSocket 请求地址 非必传参数，默认为：wss://iat-api.xfyun.cn/v2/iat
        onWillStatusChange: function (oldStatus: any, newStatus: any) {
            // 可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有 60s）,录音的动画，按钮交互等！
            // console.log(oldStatus, newStatus);
        },
        // 监听识别结果的变化回调
        onTextChange: function (arr: any) {
            // 可以在这里进行页面中一些交互逻辑处理：如将文本显示在页面中
            console.log("识别:", arr);
            // 如果最后结尾有标点符号就传
            if (arr.includes("。") || arr.includes("!") || arr.includes("?")) {
                // 将识别结果添加到用户输入内容的状态中
                setUser((prev) => [...prev, arr] as any);
                // 停止语音识别
                xfVoice.stop();
            }
        },
        // 监听识别错误回调
        onError: function (error: any) {
            console.log("错误信息：", error);
            if (error.code) {
                console.log("错误代码：", error.code);
            }
            if (error.message) {
                console.log("错误消息：", error.message);
            }
        },
    });

    // 语音合成函数
    const identify = () => {
        if (!speaking) {
            // 创建一个语音合成的对象，参数为要合成的文本
            const utterance = new SpeechSynthesisUtterance(user);
            // 获取所有可用语音
            const voices = window.speechSynthesis.getVoices();

            // 选择一个男性语音（根据语音名称或语言代码）
            const maleVoice = voices.find((voice) => {
                // 根据语音名称判断是否为男性语音
                return (
                    voice.name.includes("Male") || // 包含 "Male" 的语音
                    voice.name.includes("男声") || // 包含 "男声" 的语音
                    voice.lang === "zh-CN" // 如果需要特定语言的男性语音
                );
            });

            // 如果找到男性语音，则设置为当前语音
            if (maleVoice) {
                utterance.voice = maleVoice;
            } else {
                console.warn("未找到男性语音，默认使用系统语音");
            }
            // 根据用户输入的内容设置语音合成的文本
            if (utterance.text.includes("你好")) {
                utterance.text = "你好,我是 AI 语音助手";
            } else if (utterance.text.includes("我在哪里")) {
                utterance.text = "你在北京昌平工商管理学院";
            } else if (utterance.text.includes("你叫什么名字")) {
                utterance.text = "我叫小 V,是一个半自动机器人";
            } else if (utterance.text.includes("你会什么")) {
                utterance.text = "我什么都不会";
            } else if (utterance.text.includes("你是谁")) {
                utterance.text = "我是八维学院的 AI 语音助手";
            } else {
                utterance.text = "我不知道你在说什么";
            }
            // 开始语音合成
            window.speechSynthesis.speak(utterance);
            // 将语音合成的文本添加到 AI 回复内容的状态中
            setUserai((prev) => [...prev, utterance.text] as any);
            // 当语音合成开始时，设置 speaking 为 true
            utterance.onstart = () => setSpeaking(true);
            // 当语音合成结束时，设置 speaking 为 false
            utterance.onend = () => setSpeaking(false);
            // 当语音合成出错时，打印错误信息，并设置 speaking 为 false
            utterance.onerror = (event) => {
                console.error("文本到语音转换错误:", event);
                setSpeaking(false);
            };
        }
    };

    // 跳转到 3D 展览馆页面的函数
    const to3D = () => {
        window.location.href = "/3D";
    };

    // 定义选择虚拟形象的状态变量，初始为 "1"
    const [selectXuni, setSelectXuni] = useState<string>("1");
    // 处理虚拟形象选择的函数
    const handSelect = () => {
        // 切换动作
        if (selectXuni === "0") {
            setSelectXuni("1");
        } else if (selectXuni === "1") {
            setSelectXuni("2");
        } else if (selectXuni === "2") {
            setSelectXuni("1");
        }
    };

    // 是否判断视频聊天的状态变量，初始为 true
    const [videos, setVideos] = useState(true);

    // 退出聊天，切换回视频界面的函数
    const Exitchat = () => {
        setVideos(true);
    };

    // 跳转到 AI 页面的函数
    const AI = () => {
        window.location.href = "/AI";
    };

    // 定义输入框的值的状态变量，初始为空字符串
    const [inputValue, setInputValue] = React.useState('');
    // 定义输出框的值的状态变量，初始为空字符串
    const [outputValue, setOutputValue] = React.useState('');
    // 定义一个状态变量 tabSS，用于控制显示 AI 回复的方式，初始为 true
    const [tabSS, setTabss] = React.useState(true);

    // 智能 AI 点击发送切换的函数
    const AIS = async () => {
        // 切换到显示 AI 回复的状态
        setTabss(false);
        try {
            // 发送 POST 请求到 AI 接口
            const response = await axios.post(
                `https://api.moonshot.cn/v1/chat/completions`,
                {
                    // 使用的模型
                    model: 'moonshot-v1-8k',
                    // 用户输入的信息
                    messages: [
                        { role: 'user', content: inputValue },
                    ],
                    // 温度参数
                    temperature: 1,
                },
                {
                    headers: {
                        // 授权信息
                        Authorization: `Bearer ${'sk-cTskS1TlOfNmHPmNFrj0Cj58C2MgLQjdwluTz92zVGnaYD4r'}`,
                    },
                }
            );
            // 更新输出框的值为 AI 回复的内容
            setOutputValue(response.data.choices[0]?.message?.content);
            // 将 AI 回复的内容进行语音合成
            window.speechSynthesis.speak(new SpeechSynthesisUtterance(response.data.choices[0]?.message?.content));
            console.log(
                'AI:',
                response.data.choices[0]?.message?.content
            );
            // 清空输入框的值
            setInputValue('');
        } catch (error) {
            console.error('Error:', error);
        }
    };

    // 新增：存储用户输入的弹幕内容的状态变量，初始为空字符串
    const [danmuInput, setDanmuInput] = useState('');

    // 新增：处理发送弹幕的逻辑
    const sendDanmu = () => {
        // 如果输入的弹幕内容不为空
        if (danmuInput.trim() !== '') {
            // 将输入的弹幕内容添加到弹幕消息数组中
            setDanmuMessages((prevMessages) => [...prevMessages, danmuInput]);
            // 清空输入框的值
            setDanmuInput('');
        }
    };

    return (
        <div className="main">
            <div className="box1">
                <div className="box1-1">
                    {/* 根据主题状态显示不同的切换主题按钮 */}
                    {tabS ? (
                        <span onClick={() => tbas("dark")}>切换主题</span>
                    ) : (
                        <span onClick={() => tbas("light")}>切换主题</span>
                    )}
                    {/* 点击进入 3D 展览馆页面 */}
                    <p onClick={to3D}>进入 3D 展览馆</p>
                </div>
            </div>
            <div className="left">
                {/* 选择虚拟形象的下拉框 */}
                <select className="select" value={selectXuni} onChange={handSelect}>
                    <option value="0">请选择</option>
                    <option value="1">打招呼</option>
                    <option value="2">招手</option>
                </select>
                {/* 根据选择的虚拟形象显示不同的组件 */}
                {selectXuni === "0" ? (
                    <Xuni1></Xuni1>
                ) : selectXuni === "1" ? (
                    <Xuni1></Xuni1>
                ) : selectXuni === "2" ? (
                    <Xuni2></Xuni2>
                ) : null}
            </div>

            <div className="right">
                {/* 根据 videosets 状态显示视频或聊天界面 */}
                {videosets ? (
                    <div style={{ position: "relative" }}> {/* 添加相对定位，作为弹幕容器的参考 */}
                        {/* 视频播放器 */}
                        <video
                            src="/videos/3.mp4"
                            autoPlay
                            controls
                            muted
                            loop
                            style={{ width: "92%", height: "90%", padding: "4%" }}
                        ></video>
                        {/* 弹幕组件，传入弹幕消息数组 */}
                        <Danmu messages={danmuMessages} />
                        {/* 新增：弹幕输入框和发送按钮 */}
                        <div className="danmu-input-container">
                            <input
                                type="text"
                                value={danmuInput}
                                onChange={(e) => setDanmuInput(e.target.value)}
                                placeholder="输入弹幕内容"
                            />
                            <button onClick={sendDanmu}>发送</button>
                        </div>
                    </div>
                ) : (
                    <div className="right-1">
                        <div className="right-1-1">
                            {/* 退出聊天按钮 */}
                            <button className="btn" onClick={Exitchat}>
                                退出聊天
                            </button>
                            <div className="right-1-2">
                                {/* 显示用户输入的内容 */}
                                {user &&
                                    user.map((item: any, index: any) => {
                                        // 为每个元素添加唯一的 key
                                        return (
                                            <div className="right-1-1-1" key={`user-${index}`}>
                                                <img src="/images/avatar.png" alt="" />
                                                <span>{item}</span>
                                            </div>
                                        );
                                    })}
                            </div>
                            <div className="right-1-3">
                                {/* 根据 tabSS 状态显示不同的 AI 回复内容 */}
                                {
                                    tabSS ? <div>{userAI && userAI.map((item: any, index: any) => {
                                        // 为每个元素添加唯一的 key
                                        return (
                                            <div className="right-1-1-2" key={`userAI-${index}`}>
                                                <img src="/images/speeching.gif" alt="" />
                                                <span>{item}</span>
                                            </div>
                                        );
                                    })}</div>
                                        :
                                        <div className="right-1-1-2">
                                            <img src="/images/speeching.gif" alt="" />
                                            <span>{outputValue}</span>
                                        </div>
                                }
                            </div>
                        </div>
                        {/* 输入框，用于用户输入信息 */}
                        <input
                            type="text"
                            value={inputValue}
                            onChange={(e) => setInputValue(e.target.value)}
                        />
                        {/* 发送按钮，点击调用 AIS 函数 */}
                        <button onClick={AIS}>发送</button>
                    </div>
                )}
            </div>

            <div className="top">
                <div onClick={theme}>
                    {/* 根据 tp 状态显示不同的语音识别图标 */}
                    {tp ? (
                        <div onClick={() => xfVoice.stop()}>
                            <img className="img" src="/images/speeching.gif" alt="" />
                        </div>
                    ) : (
                        <div onClick={() => xfVoice.start()}>
                            <img className="img" src="/images/speaking.jpeg" alt="" />
                        </div>
                    )}
                </div>
                <div className="top-1">
                    {/* 点击跳转到 AI 页面的图标 */}
                    <img className="img1" onClick={AI} src="/images/chat-model.svg" alt="" />
                    <img className="img1" src="/images/answer-model.svg" alt="" />
                    <img className="img1" src="/images/answer-icon.svg" alt="" />
                </div>
            </div>

            <div className="top-2">
                <span>呼唤“小维小维”，开始新一轮对话</span>
                <img src="../../../public/images/notice.gif" alt="" />
            </div>
        </div>
    );
}

// 导出 Index 组件
export default Index;